<template>
    <div class="home">
        <div class="aboveBox">
            <el-input v-model="spotname" placeholder="请输入想查询的景点"></el-input><el-button style="margin:0 0 0 10px;"
                @click="findspots()">点击搜索</el-button>
        </div>
        <div class="belowBox" v-if="spotsList.length > 0">
            <el-col :span="8" v-for="(item, index) in spotsList" :key="index">
                <el-card shadow="hover" :body-style="{ padding: '0px', margin: '10px' }" style="overflow: hidden;margin: 5px;">
                    <img :src="item.spot_img[0]" class="image" @click="spotClick(item)">
                    <div style="padding: 14px;">
                        <span>{{ item.spot_name }}</span>
                    </div>
                </el-card>
            </el-col>
        </div>
        <div class="belowBox" v-if="spotsList.length <= 0">
            <div style="width: 100%;font-size: 50px;text-align: center;">
                暂无相关数据
            </div>
        </div>
        <el-backtop :right="60" :bottom="100" />
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            spotsID: '',
            spotname: '',
            spotsinfo: false,
            spotsList: [],
        };
    },
    mounted() {
        this.getSpotsList()
    },
    watch: {
        findInfo(newVal, oldVal) {
            if (oldVal !== '' && newVal === '') {
                this.getSpots();
            }
        }
    },
    methods: {
        async getSpotsList() {
            let res = await api.getSpots({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                for (let i = 0; i < res.data.length; i++) {
                    this.spotsList.push(res.data[i])
                }
                console.log(this.spotsList);
            } else {
                this.spotsList = []
            }
        },
        spotClick(item) {
            localStorage.spotsid = item._id
            this.$router.push({
                path: '/showspot'
            })
        },
        async findspots() {
            if (this.spotname === '') {
                this.spotsList = []
                this.getSpotsList()
            } else {
                this.spotsList = []
                let res = await api.getSpots({ pageIndex: this.pageIndex, pageSize: this.pageSize })
                if (res?.code == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].spot_name === this.spotname || res.data[i].spot_cityid === this.spotname) {
                            this.spotsList.push(res.data[i])
                        }
                    }
                } else {
                    this.spotsList = []
                }
            }
        }
    }
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.aboveBox {
    width: 85%;
    height: 30px;
    padding: 20px;
    margin: 10px auto;
    background-color: #ddd;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.belowBox {
    width: 85%;
    height: 80vh;
    padding: 20px;
    margin: 10px auto;
    background-color: #ddd;
    border-radius: 10px;
    overflow-y: scroll;
}
.belowBox::-webkit-scrollbar {
    display: none;
}

.img {
    width: 40%;
    height: 500px;
    overflow: hidden;
    border-radius: 20px;

}

.image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.el-image {
    width: 100%;
    height: 100%;
}
</style>